
<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/role' }">返回</el-breadcrumb-item>
        <el-breadcrumb-item><a>权限</a></el-breadcrumb-item>
        <el-breadcrumb-item>编辑权限</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
        角色名称:{{ roleName }}
    </el-card>
    <el-card class="box-card">
        <el-tree ref="tree" :data="menuList" show-checkbox node-key="_id" :default-checked-keys="mid" :props="defaultProps"
            @check-change="handChange" />
        <el-button style="margin-left:1000px" type="primary" @click="edit">修改</el-button>
    </el-card>
</template>

<script setup>
import { onMounted, ref } from "vue"
import api from "../../utils/request"
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from "vue-router"

const route = useRoute()
const roleName = ref("")
const menuList = ref([])
const mid = ref([])
const defaultProps = {
    children: 'children',
    label: 'name',
}
let tree = ref(null);

onMounted(() => {
    getData()
})




//获取数据
const getData = async () => {
    let result = await api.get(`/js/role/${route.params.id}`)
    roleName.value = result.data.data.rname

    let result2 = await api.get(`/js/role_menu/${route.params.id}`)
    console.log(result2.data.list);
    menuList.value = result2.data.list
    mid.value = result2.data.mid
}

//
const handChange = (val) => {
    if (mid.value.includes(val._id)) {
        mid.value = mid.value.filter(item => item != val._id)
    } else {
        mid.value.push(val._id)
    }
}

//修改权限 
const edit = async () => {
    let result = await api.put(`/js/editRole/${route.params.id}`, { mid: mid.value })
    if (result.data.code == 200) {
        ElMessage.success("修改成功")
        //强制刷新
        location.reload()
    } else {
        ElMessage.error("修改失败")
    }
}



</script>

<style lang="less" scoped>
.box-card {
    width: 90%;
    margin-top: 30px
}
</style>